import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface PolarBarProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: object;
    tooltip?: object;
    angleAxisRange?: number[][];
    angleAxisData?: string[][];
    seriesData?: number[][];
}

@customElement('lit-polar-end-angle')
export class LitPolarEndAngle extends LitElement {
    @property({type: String}) chartId: string = 'lit-polar-end-angle-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = {};
    @property({type: Object}) tooltip: any = {};
    @property({type: Array}) angleAxisRange: number[][] = [[90, 0], [-90, -180]];
    @property({type: Array}) angleAxisData: string[][] = [['S1', 'S2', 'S3'], ['T1', 'T2', 'T3']];
    @property({type: Array}) seriesData: number[][] = [[1, 2, 3], [1, 2, 3]];

    getAngleAxis(): any[] {
        return this.angleAxisData.map((data, index) => ({
            type: 'category',
            polarIndex: index,
            startAngle: this.angleAxisRange[index][0],
            endAngle: this.angleAxisRange[index][1],
            data: data
        }));
    }

    getRadiusAxis(): any[] {
        return this.angleAxisData.map((_, index) => ({
            polarIndex: index,
        }));
    }

    getSeries(): any[] {
        return this.seriesData.map((data, index) => ({
            type: 'bar',
            polarIndex: index,
            data: data,
            coordinateSystem: 'polar'
        }));
    }

    option: echarts.EChartsOption = {
        title: this.title,
        tooltip: this.tooltip,
        angleAxis: this.getAngleAxis(),
        radiusAxis: this.getRadiusAxis(),
        polar: [{}, {}],
        series: this.getSeries(),
    };

    static styles = style;

    updated() {
        this.option.title = this.title;
        this.option.tooltip = this.tooltip;
        this.option.angleAxis = this.getAngleAxis();
        this.option.radiusAxis = this.getRadiusAxis();
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width};height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-polar-end-angle': LitPolarEndAngle;
    }
}